<template>
  <div>
    <div>
      <div class="header flex">
        <el-date-picker
      v-model="date"
      type="date"
      placeholder="选择日期"
      value-format="yyyy-MM-dd" v-if="$store.getters.isShow">
    </el-date-picker>
        <el-input v-model="type" style="width:170px" v-if="$store.getters.isShow && this.isShow"></el-input>
        <el-button @click="search()" type="primary" icon="el-icon-zoom-in" v-if="$store.getters.isShow && this.isShow">查询</el-button>
        <el-button @click="cleartIn()" type="primary" icon="el-icon-refresh-left" v-if="$store.getters.isShow && this.isShow">重置</el-button>
        <el-button type="primary" @click="add()" style="margin-right:30px" icon="el-icon-plus">上班打卡</el-button>
        <el-button type="primary" @click="add2()" style="margin-right:30px" icon="el-icon-edit">下班打卡</el-button>
      </div>
      <div class="flex" style="width:30%">
        <el-button type="danger" @click="clear()" v-if="$store.getters.isShow && this.isShow">删除</el-button>
      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        border
        @selection-change="handleSelectionChange">
      <!-- 单选全选 点击按钮 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="员工姓名" width="180">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="name" label="上班时间" width="180">
          <template slot-scope="scope">{{ scope.row.goTime }}</template>
        </el-table-column>
        <el-table-column prop="address" label="下班时间" width="180">
          <template slot-scope="scope">{{ scope.row.afterTime }}</template>
        </el-table-column>
        <el-table-column label="工作日期" width="180">
          <template slot-scope="scope">{{ scope.row.createDate }}</template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column prop="address" label="创建时间" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
      </el-table>
      <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
    </div>
  </div>
</template>

<script>
import {attListAPI,addAttInsertAPI,attUpdateAPI,kpiDeleteAPI,searchAttAPI} from '../../api/6-attendanceRecord'
export default {
  data() {
    return {
      date:'',
      formLabelWidth: '120px',
      type:'',
      dataList:[],
      total: 0, // 列表总行数
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      multipleSelection: [],
      isShow:''
    };
  },
  created(){
    this.jia()
    if(this.$store.getters.role == 'hr'){
      this.isShow = false
    }else{
      this.isShow = true
    }
  },
  components: {
    Pagin: () => import('c/Pagin')
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //重置
    cleartIn(){
      this.month =''
    },
    //查询
   async search(){
    const res = await searchAttAPI({date:this.date,type:this.type})
    if(res.code == '1'){
        if(res.data != null){
          this.dataList = res.data
          this.total = this.dataList.length
          this.fetchData(this.currentPage)
          this.$message.success(res.msg)
        }
      }else{
          this.$message.error(res.msg)
        }
    },
    //删除
  async clear(){
      var id = []
      this.multipleSelection.forEach(item=>{
         id.push(item.id)
      })
      if(id.length > 0){
        const res = await kpiDeleteAPI(id)
        console.log(id);
         //请求成功后
         if(res.code == '1'){
        this.jia()
        this.$message.success('删除成功')
       }else{
        this.$message.error('删除失败')
       }
      }

    },
      //上班
     async add(){
       const res = await addAttInsertAPI()
       if(res.code == '1'){
        this.jia()
        this.$message.success('上班打卡')
       }else{
        this.$message.error('打卡失败')
       }

    },
     //下班
    async add2(){
      const res = await attUpdateAPI()

      if(res.code == '1'){
        this.jia()
        this.$message.success('下班打卡')
       }else{
        this.$message.error('打卡失败')
       }
    },
    //模拟假数据
   async jia(){
      const res = await attListAPI()
      // console.log(res);
       this.dataList = res.data
      this.total = this.dataList.length
      this.fetchData(this.currentPage)
    },
    fetchData (count) {
      var list = this.dataList
      var from = (count - 1) * this.pageSize
      const to = count * this.pageSize
      this.tableData = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from])
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 120px;
}
.header {
  width: 70%;
  // border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}

</style>
